<template>
    <view class="user_information">
  <image 
    class="user_img" 
    @tap="change_img" 
    :src="avatarUrl || 'https://img2.baidu.com/it/u=3383670095,477406457&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'" 
    mode="aspectFill"
  />
  <text class="user_name" @tap="()=>{dialogFormVisible = true}">{{ user_name }}</text>
   <img src="/src/icon/upd.png" @tap="()=>{dialogFormVisible = true}" class="icon" alt="">
  <view class="mask" v-if="dialogFormVisible">
    <view class="dialogForm">
      <view class="dialog_form_title">修改用户名</view>
      <view class="inp_view">
        <input 
          type="text" 
          v-model="name"
          placeholder="请输入用户名"
          @input="change_name"
        />
      </view>
      <view class="dialog_form_footer">
        <button class="btn" @tap="change_user_name">确定</button>
        <button class="btn" @tap="()=>{dialogFormVisible = false}">取消</button>
      </view>
    </view>
  </view>
</view>
</template>
<script setup>
import { ref,onMounted } from 'vue'
const dialogFormVisible = ref(false)
const user_name = ref('见习占星师')
const name = ref('')
const avatarUrl = ref('') 
onMounted(() => {
  try{
     let userName = uni.getStorageSync('userInfo')[0].name
  if (userName) {
    user_name.value = userName
  }
  }catch(err){
    uni.navigateTo({url:"/pages/Login/Login"})
  }
  
})
const change_name = (e) => {
  name.value = e.detail.value
}
const change_user_name = () => {
  dialogFormVisible.value = false
  user_name.value = name.value
}
const change_img = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      avatarUrl.value = tempFilePath
      // 如果需要上传到服务器，可以解开下面的注释
      // handleUpload(tempFilePath)
    },
    fail: (err) => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      })
    }
  })
}
// 统一处理上传
// const handleUpload = async (previewUrl, fileSize, rawFile) => {
//   try {
//     // 1. 先显示预览
//     avatarUrl.value = previewUrl
    
//     // 2. 验证文件大小（示例限制2MB）
//     if (fileSize / 1024 / 1024 > 2) {
//       throw new Error('图片大小不能超过2MB')
//     }
    
//     // 3. 正式上传（示例使用FormData）
//     const formData = new FormData()
//     if (rawFile) formData.append('file', rawFile) // H5
//     else formData.append('file', { uri: previewUrl }) // 小程序需特殊处理
    
//     const res = await uploadFileAPI(formData)
    
//     // 4. 更新服务器返回的头像URL（假设接口返回data.url）
//     avatarUrl.value = res.data.url
    
//     // 可添加成功提示
//     console.log('上传成功', res.data)
//   } catch (err) {
//     console.error('上传失败', err)
//     avatarUrl.value = '' // 失败时清空预览
//   }
// }

</script>
<style scoped>
.user_information {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background-color: #51336c;
  border-bottom: 1px solid #51336c;
  box-sizing: border-box;
}

.user_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.user_name {
  font-size: 16px;
  color: #eee;
  margin-left: 12px;
  flex: 1;
}

.icon-editor {
  font-size: 20px;
  color: #eee;
  padding: 8px;
}
.inp_view{
  height: 5vh;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding-left: 2vw;
  box-sizing: border-box;
  margin-top: 5vw;
}
.mask{
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.6);
}
.dialogForm{
  width: 70vw;
  height: 30vh;
  background-color: white;
  padding: 5vw;
  box-sizing: border-box;
  border-radius: 2vw;
  position: relative;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.dialog_form_footer{
  display: flex;
  margin-top: 5vw;
}
.dialog_form_title{
  text-align: center;
  font-size: 5vw;
  font-weight: bold;
}
.btn{
  width: 50%;
  height: 6vh;
  border: none;
}
.icon{
  width: 7vw;
  height: 7vw;
}
</style>